<!-- 未收款 -->
<template>
    <div class="w-full h-full bg-white p-3">
        <Bar class="mb-2.5">
          <span class="bar-span cursor-pointer" @click="noPayOrder">未收款订单({{ noPayOrderCount }})</span>
          <span class="ml-4 text-[#6C6C6C] text-[13px] align-top cursor-pointer" @click="paySuccess">已完成未收款订单</span>
        </Bar>
        <table-data :tableData="tableData">
          <template #id>
            <el-table-column prop="id" label="序号" width="60" />
          </template>
        </table-data>
        <confirm-paid></confirm-paid>
        <select-time></select-time>
        <!-- 选择人员弹窗 -->
        <el-dialog v-model="staffSelectStore.dialogTableVisible" align-center title="选择人员" width="500">
            <select-human>
                <template #confirmButton>
                    <div class="w-full text-center">
                        <el-button 
                            type="primary" 
                            size="large" 
                            style="width: 120px; margin: 30px auto;" 
                            @click="confirmServiceHuman()"
                        >
                            确定
                        </el-button>
                    </div>
                </template>
            </select-human>
        </el-dialog>
        <!-- 地图弹窗 -->
        <el-dialog align-center v-model="staffSelectStore.mapDetail" width="850" class="h-140">
            <t-map mode="orderInfo"></t-map>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="pay">
import Bar from '@/components/Bar.vue';
import ConfirmPaid from '@/components/ConfirmPaid.vue';
import SelectTime from '@/components/SelectTime.vue';
import TableData from '@/components/TableData.vue';
import SelectHuman from '@/components/SelectHuman.vue';
import instance from '@/api';
import { useNoPayStore } from '@/stores/useNoPayStore';
import { useStaffSelectStore } from '@/stores/useStaffSelectStore';
import { onMounted, onUnmounted, defineAsyncComponent } from 'vue';
import { storeToRefs } from 'pinia';
import { emitter } from '@/utils/emitter';

const TMap = defineAsyncComponent(() => import('@/components/TMap.vue'))

const noPayStore = useNoPayStore()
const staffSelectStore = useStaffSelectStore()
const { noPayOrderCount, tableData } = storeToRefs(noPayStore)

onMounted(async () => {
  if(!noPayStore.tableData.length){
    const resp = await instance.get('/api/order/noPayOrder')
    noPayStore.setNoPayData(resp.data)
    noPayStore.setNoPayOrderCount(resp.data.length)
  }
  // 监听选择人员事件
  emitter.on('selectHuman', handleSelectHuman)
})

// 处理选择人员事件
const handleSelectHuman = (row: any) => {
  staffSelectStore.selectHuman(row)
}

// 在组件卸载时移除事件监听
onUnmounted(() => {
  emitter.off('selectHuman', handleSelectHuman)
  staffSelectStore.resetAllState()
})

async function paySuccess(){
  const { data } = await instance.get('/api/order/selectSuccess')
  noPayStore.setNoPayData(data)
}
async function noPayOrder() {
  const { data } = await instance.get('/api/order/noPayOrder')
  noPayStore.setNoPayData(data)
}

const { confirmServiceHuman } = staffSelectStore
</script>

<style scoped>
.el-table :deep(.cell) {
  text-align: center;
}
</style>